<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qqhome测试页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/css/cinui.css"/>

    <link rel="stylesheet" href="../static/layui-v2.6.8/layui/css/layui.css" media="all">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../static/layui-v2.6.8/layui/layui.js" charset="utf-8"></script>
    <script src="../static/js/jquery-3.6.js"></script>
    <!--  图标库  -->
    <link href="../static/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <script src="../static/js/public.js" type="module"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src='../static/js/bootstrap.min.js'></script>
</head>
<body>

<div id="qqVue">
    <div>
        <label>用户名</label>
        <span>{{name}}</span>
    </div>
    <div>
        <label>头像</label>
        <span><img :src="img"/></span>

    </div>
</div>

<script>
    $(document).ready(function () {
        //请求qq登陆 用户信息
        $.post(
            "qqUserInfo", function (data) {
                console.log(data)
                var qqVue = new Vue({
                    el:'#qqVue',
                    data:{
                        name: data.data.items.name,
                        img: data.data.items.imgUrl,
                    }
                })
            }
        )
    })
</script>


</body>
</html>